<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Thông tin cá nhân</title>
<script>
	$(function() {
		$(".tabsInfo").tabs();
	});
</script>
</head>
<body>
	<div id="page-heading">
		<h1>Thông tin cá nhân</h1>
	</div>
	<div class="tabsInfo">
		<ul>
			<li><a href="#tab-1">Thông tin cơ bản</a></li>
			<li><a href="#tab-2">Thông tin tài khoản</a></li>
		</ul>

		<div id="tab-1">
			<form action="updatePublisher" method="POST" id="updatePublisherId"
				name="publisher">
				<input type="hidden" name="id" value="${publisher.id}">
				<table border="0" cellpadding="0" cellspacing="0" id="id-form">
					<tr>
						<th valign="top"><spring:message code="publisher.name" /></th>
						<td><span class="infoDisplay">${publisher.name}</span></td>
						<td><input style="display: none;" type="text"
							class="inp-form infoEdit" name="name" value="${publisher.name}" /></td>
						<td><span class="error errorName"></span></td>
					</tr>

					<tr>
						<th valign="top"><spring:message code="publisher.address" /></th>
						<td><span class="infoDisplay">${publisher.address}</span></td>
						<td><input style="display: none;" type="text"
							class="inp-form infoEdit" name="address"
							value="${publisher.address}" /></td>
						<td><span class="error errorAddress"></span></td>
					</tr>

					<tr>
						<th valign="top"><spring:message
								code="publisher.emailAddress" /></th>
						<td><span class="infoDisplay">${publisher.emailBussiness}</span></td>
						<td><input style="display: none;" type="text"
							class="inp-form infoEdit" name="emailBussiness"
							value="${publisher.emailBussiness}" /></td>
						<td><span class="error errorMail"></span></td>
					</tr>

					<tr>
						<th valign="top"><spring:message code="publisher.phoneNumber" /></th>
						<td><span class="infoDisplay">${publisher.phone}</span></td>
						<td><input style="display: none;" type="text"
							class="inp-form infoEdit" name="phone" value="${publisher.phone}" /></td>
						<td><span class="error errorPhone"></span></td>
					</tr>
					<tr>
						<th valign="top"><spring:message code="publisher.description" /></th>
						<td><p class="infoDisplay">${publisher.description}</p></td>
						<td><textarea style="display: none;" rows="" cols=""
								class="form-textarea infoEdit" name="description">${publisher.description}</textarea></td>
					</tr>
					<tr>
						<th>&nbsp;</th>
						<td valign="top" id="editPublisherButton"><input
							type="button" value="<spring:message code="button.edit" />"
							class="form-submit" /></td>
						<td valign="top"><input style="display: none;" type="button"
							id="updatePublisherButton"
							value="<spring:message code="button.save" />" class="form-submit" />
						</td>
						<td valign="top"><input style="display: none;" type="button"
							id="cancelButton" value="<spring:message code="button.cancel" />"
							class="form-reset" /></td>
					</tr>
				</table>
			</form>
		</div>
		<div id="tab-2">
			<form action="updateAccountInfo" id="updateAccId">
				<input type="hidden" value="${account.id}" name="id">  
				<table border="0" cellpadding="0" cellspacing="0" id="id-form">
					<tr>
						<th valign="top"><spring:message code="publisher.username" /></th>
						<td><span class="">${account.username}</span></td>
					</tr>
					<tr>
						<th valign="top"><spring:message code="publisher.oldpassword" /></th>
						<td style="display: none;" class="infoAccEdit"><input  type="password" class="inp-form" name="oldpassword" value="" /></td>
						<td><span class="infoAccDisplay">xxxxxxxx</span></td>
						<td><span class="error errorAccPass"></span></td>
					</tr>
					<tr class="infoAccEdit" style="display: none;">
						<th valign="top"> <spring:message code="publisher.password" /></th>
						<td><input  type="password" class="inp-form " name="password" value="" /></td>
						<td><span class="error"></span></td>
					</tr>
					<tr valign="top" style="display: none;" class="infoAccEdit">
						<th valign="top"><spring:message code="publisher.repeatpassword" /></th>
						<td><input type="password" class="inp-form" name="repeatPassword" value=""/></td>
						<td></td>
					</tr>
					<tr>
						<th>&nbsp;</th>
						<td valign="top" class="infoAccDisplay"><input type="button" id="editAccButton"
							value="<spring:message code="button.changepass" />" class="form-submit" />
						</td>
						<td valign="top"><input style="display: none;" type="button" id="updateAccButton"
							value="<spring:message code="button.save" />" class="form-submit" />
						</td>
						<td valign="top"><input style="display: none;" type="button" id="cancelAccButton"
							value="<spring:message code="button.cancel" />" class="form-reset" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#editPublisherButton').click(function() {
				$('.infoDisplay').css("display", "none");
				$('.infoEdit').css("display", "block");
				$('#cancelButton').css("display", "block");
				$('#updatePublisherButton').css("display", "block");
				$('#editPublisherButton').css("display", "none");
			});
			$('#editAccButton').click(function() {
				$('.infoAccDisplay').css("display", "none");
				$('.infoAccEdit').css("display", "table-row");
				$('#cancelAccButton').css("display", "table-cell");
				$('#updateAccButton').css("display", "table-cell");
				$('#editAccButton').css("display", "none");
			});
			$('#updatePublisherButton').click(function() {
				$.ajax({
					url : "updatePersonInfo",
					type : "POST",
					data : $("#updatePublisherId").serialize(),
					success : function(data) {
						if (data.validate == true) {
							if (data.errorMail != null) {
								$('.errorMail').text(data.errorMail);
							}
							if (data.errorName != null) {
								$('.errorName').text(data.errorName);
							}
							if (data.errorAddress != null) {
								$('.errorAddress').text(data.errorAddress);
							}
							if (data.errorPhone != null) {
								$('.errorPhone').text(data.errorPhone);
							}
						} else {
							$('.errorMail').text("");
							$('.errorName').text("");
							$('.errorAddress').text("");
							$('.errorPhone').text("");
							var message = "<p style='font-size: 12px;'>Lưu thành công! </p>";		
							jNotify(message,{
							     autoHide : true, 
							     TimeShown : 3000,
							     HorizontalPosition : 'center',
							     onCompleted : function(){
							    	 window.location.href = "personal-info";   
								 }
							   }
							);	
						}
					}

				});
			});
			
			$('#updateAccButton').click(function(){
				$.ajax({
					url : "updateAccountInfo",
					type : "POST",
					data : $("#updateAccId").serialize(),
					success : function(data) {
						if (data.validate == true) {
							if (data.errorName != null) {
								$('.errorAccName').text(data.errorName);
							}
							if (data.errorPass != null) {
								$('.errorAccPass').text(data.errorPass);
							}
						} else {
							$('.errorAccName').text("");
							$('.errorAccPass').text("");
							var message = "<p style='font-size: 12px;'>Lưu thành công! </p>";		
							jNotify(message,{
							     autoHide : true, 
							     TimeShown : 10000,
							     HorizontalPosition : 'center',
							     onCompleted : function(){
							    	 setTimeout(function(){
							    		 window.location.href = "personal-info";   
							    	 }, 2000);
								 }
							   }
							);	
						}
					}

				});
			});
			
			$('#cancelButton').click(function() {
				$('.infoDisplay').css("display", "block");
				$('.infoEdit').css("display", "none");
				$('#cancelButton').css("display", "none");
				$('#updatePublisherButton').css("display", "none");
				$('#editPublisherButton').css("display", "block");
				$('.errorMail').text("");
				$('.errorName').text("");
				$('.errorAddress').text("");
				$('.errorPhone').text("");
			});
			$('#cancelAccButton').click(function() {
				$('.infoAccDisplay').css("display", "block");
				$('.infoAccEdit').css("display", "none");
				$('#cancelAccButton').css("display", "none");
				$('#updateAccButton').css("display", "none");
				$('.errorAccName').text("");
				$('.errorAccPass').text("");
				$('#editAccButton').css("display", "block");
			});

		});
	</script>
</body>
</html>